리스트 내부에서의 Key 사용법

React를 사용할 때, 리스트를 렌더링하는 경우가 많습니다. 이때 key라는 특별한 속성을 사용하는 것이 중요합니다. key는 React가 각 요소를 구분하고, 효율적으로 업데이트할 수 있도록 돕습니다. key를 올바르게 사용하는 방법을 알아봅시다.

왜 key가 중요한가?

React는 가상 DOM(Virtual DOM)을 이용해 빠르고 효율적인 업데이트를 수행합니다. 리스트 내부에서 각 항목을 구분할 수 있는 key를 제공하지 않으면, React는 어떤 항목이 변경되었는지 알기 어렵습니다. 따라서, 올바른 key를 설정하는 것이 중요합니다.

key 설정의 기본 원칙

• 유일성: 리스트 내에서 각 항목의 key는 유일해야 합니다.
• 변경 불가: 항목이 변경될 때마다 key 값이 바뀌면 안 됩니다.

잘못된 key 사용 예시

리스트의 인덱스를 key로 사용하면 안 됩니다. 인덱스는 항목이 추가되거나 삭제될 때 변경될 수 있기 때문입니다.

const items = ['Apple', 'Banana', 'Cherry'];

function FruitList() {
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
}

위 예시에서 index를 key로 사용하면, 항목의 순서가 바뀔 때 React가 올바르게 업데이트하지 못할 수 있습니다.

올바른 key 사용 예시

항목이 고유한 식별자를 가지고 있다면, 이를 key로 사용해야 합니다.

const items = [
  { id: 1, name: 'Apple' },
  { id: 2, name: 'Banana' },
  { id: 3, name: 'Cherry' },
];

function FruitList() {
  return (
    <ul>
      {items.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

위 예시에서는 각 항목의 id를 key로 사용해 고유성과 불변성을 보장합니다.

주의할 점

• 동일한 key 사용: key는 리스트 내에서 유일해야 합니다. 동일한 key를 사용하면 React가 혼동할 수 있습니다.
• 동적인 데이터: 데이터가 동적으로 변경되는 경우, 고유한 key가 더 중요합니다. 예를 들어, 서버에서 받아오는 데이터의 경우에도 각 항목에 고유한 id를 부여하는 것이 좋습니다.

더 알아보기

• 가상 DOM: React의 가상 DOM이 어떻게 작동하는지에 대해 더 알아보세요. React 공식 문서에서 확인할 수 있습니다.
• 효율적인 렌더링: key를 사용하여 어떻게 효율적인 렌더링이 가능한지 더 자세히 알아보세요. React 공식 문서에서 관련 정보를 찾을 수 있습니다.

내용 요약과 다음 주제

이 글에서는 리스트 내부에서 key를 사용하는 이유와 올바른 사용 방법에 대해 설명했습니다. key는 React가 각 요소를 구분하고 효율적으로 업데이트할 수 있도록 돕습니다. 다음 주제인 안전한 Raw HTML 사용법에서는 Raw HTML을 React에서 안전하게 사용하는 방법에 대해 알아보겠습니다.